import React, { useEffect, useState } from 'react';
import './index.less';
import styles from './less.less';
import {
  Tabs,
  Button,
  Mask,
  Rate,
  Space,
  Toast,
  SideBar,
  Badge,
  JumboTabs,
} from 'antd-mobile';
import { request, history } from 'umi';
import classNames from 'classnames';
import axios from 'axios';
type Props = {};
export default function index({}: Props) {
  const [visible, setVisible] = useState(false); //背景蒙版
  let [chushi, setchushi] = useState('爽口凉菜');
  let [asd, setasd] = useState([]);
  let [len, setlen] = useState(0);
  let [date, setdate] = useState([
    {
      id: 1,
      title: '数据1',
      price: 14,
      zl: '爽口凉菜',
      img: 'http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 2,
      title: '数据2',
      price: 13,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 3,
      title: '数据3',
      price: 15,
      zl: '小吃主食',
      img: 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 4,
      title: '数据3',
      price: 17,
      zl: '爽口凉菜',
      img: 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 5,
      title: '数据3',
      price: 60,
      zl: '爽口凉菜',
      img: 'http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 6,
      title: '数据3',
      price: 15,
      zl: '爽口凉菜',
      img: 'http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 7,
      title: '数据3',
      price: 90,
      zl: '爽口凉菜',
      img: 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 8,
      title: '数据3',
      price: 36,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 9,
      title: '数据3',
      price: 25,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 10,
      title: '数据3',
      price: 15,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 11,
      title: '数据3',
      price: 20,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 12,
      title: '数据3',
      price: 15,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 13,
      title: '数据3',
      price: 19,
      zl: '小吃主食',
      img: 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 14,
      title: '数据3',
      price: 18,
      zl: '小吃主食',
      img: 'http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 15,
      title: '数据3',
      price: 15,
      zl: '小吃主食',
      img: 'http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 16,
      title: '数据3',
      price: 90,
      zl: '爽口凉菜',
      img: 'http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 18,
      title: '数据3',
      price: 36,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 19,
      title: '数据3',
      price: 25,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 20,
      title: '数据3',
      price: 15,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 21,
      title: '数据3',
      price: 20,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 22,
      title: '数据3',
      price: 15,
      zl: '精品套餐',
      img: 'http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 23,
      title: '数据3',
      price: 19,
      zl: '小吃主食',
      img: 'http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 24,
      title: '数据3',
      price: 18,
      zl: '小吃主食',
      img: 'http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114',
    },
    {
      id: 25,
      title: '数据3',
      price: 15,
      zl: '小吃主食',
      img: 'http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114',
    },
  ]); //获取到所有数据
  let [pj, setpj] = useState([
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '满意',
      name: '15******23',
      a: '好',
    },
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '满意',
      name: '15******23',
      a: '好',
    },
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '不满意',
      name: '15******23',
      a: '一般',
    },
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '满意',
      name: '15******23',
      a: '好',
    },
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '满意',
      name: '15******23',
      a: '好',
    },
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '不满意',
      name: '15******23',
      a: '一般',
    },
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '不满意',
      name: '15******23',
      a: '好',
    },
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '不满意',
      name: '15******23',
      a: '一般',
    },
    {
      img: 'http://static.galileo.xiaojukeji.com/static/tms/default_header.png',
      pj: '满意',
      name: '15******23',
      a: '好',
    },
  ]);
  const [activeKey, setActiveKey] = useState('key1');
  let [jg, setjg] = useState(0);

  useEffect(() => {
    console.log(asd);
    // if (sessionStorage.getItem === null) {
    //   sessionStorage.setItem('len', len)
    //   sessionStorage.setItem('jg', jg)
    // } else {

    // }
  }, [len, jg]);
  return (
    <div className="xl2">
      <div className="title">
        <img
          src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"
          alt=""
        />
        <span>粥品香坊</span>
        <a onClick={() => setVisible(true)} style={{ fontSize: '3rem' }}>
          5个
        </a>
      </div>
      <div className="neirong">
        <Tabs>
          <Tabs.Tab title="商品" key="fruits">
            <div className="cant">
              <div>
                <div
                  onClick={(e) => {
                    // console.log(e.target.innerText);
                    setchushi(e.target.innerText);
                  }}
                >
                  爽口凉菜
                </div>
                <div
                  onClick={(e) => {
                    // console.log(e.target.innerText);
                    setchushi(e.target.innerText);
                  }}
                >
                  精品套餐
                </div>
                <div
                  onClick={(e) => {
                    // console.log(e.target.innerText);
                    setchushi(e.target.innerText);
                  }}
                >
                  小吃主食
                </div>
              </div>
              <div>
                <div
                  style={{ display: chushi === '爽口凉菜' ? '' : 'none' }}
                  className="gd"
                >
                  {date.map((item, index) => {
                    return (
                      <div
                        key={index}
                        style={{
                          display: item.zl === '爽口凉菜' ? '' : 'none',
                        }}
                        className=""
                      >
                        <img
                          src={item.img}
                          alt=""
                          onClick={() => {
                            history.push({
                              pathname: '/xq',
                              state: item,
                            });
                          }}
                        />
                        <span>{item.title}</span>
                        <span
                          onClick={() => {
                            // console.log(item);
                            let aaa = asd;
                            aaa.push(item);
                            setasd(aaa);
                            setlen(++len);
                            setjg((jg = item.price + jg));
                            sessionStorage.setItem('sss', aaa);
                          }}
                          style={{ fontSize: '2rem' }}
                        >
                          +
                        </span>
                        <div style={{ color: 'red' }}>￥{item.price}</div>
                      </div>
                    );
                  })}
                </div>
                <div
                  style={{ display: chushi === '精品套餐' ? '' : 'none' }}
                  className="gd"
                >
                  {date.map((item, index) => {
                    return (
                      <div
                        key={index}
                        style={{
                          display: item.zl === '精品套餐' ? '' : 'none',
                        }}
                      >
                        <img
                          src={item.img}
                          alt=""
                          onClick={() => {
                            history.push({
                              pathname: '/xq',
                              state: item,
                            });
                          }}
                        />
                        <span>{item.title}</span>
                        <span
                          onClick={() => {
                            // console.log(item);
                            let aaa = asd;
                            aaa.push(item);
                            setasd(aaa);
                            setlen(++len);
                            setjg((jg = item.price + jg));
                          }}
                          style={{ fontSize: '2rem' }}
                        >
                          +
                        </span>
                        <div style={{ color: 'red' }}>￥{item.price}</div>
                      </div>
                    );
                  })}
                </div>
                <div
                  style={{ display: chushi === '小吃主食' ? '' : 'none' }}
                  className="gd"
                >
                  {date.map((item, index) => {
                    return (
                      <div
                        key={index}
                        style={{
                          display: item.zl === '小吃主食' ? '' : 'none',
                        }}
                      >
                        <img
                          src={item.img}
                          alt=""
                          onClick={() => {
                            history.push({
                              pathname: '/xq',
                              state: item,
                            });
                          }}
                        />
                        <span>{item.title}</span>
                        <span
                          onClick={() => {
                            // console.log(item);
                            let aaa = asd;
                            aaa.push(item);
                            setasd(aaa);
                            setlen(++len);
                            setjg((jg = item.price + jg));
                          }}
                          style={{ fontSize: '2rem' }}
                        >
                          +
                        </span>
                        <div style={{ color: 'red' }}>￥{item.price}</div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
            <div
              style={{
                fontSize: '2rem',
                zIndex: '9990',
                position: 'fixed',
                bottom: '3rem',
                backgroundColor:
                  len === 0 ? 'rgb(219, 222, 223)' : 'aquamarine',
                width: '100%',
              }}
            >
              数量：<span style={{ color: 'red' }}>{len}</span>
              价格：<span style={{ color: 'red' }}>{jg}</span>
              <button
                style={{
                  backgroundColor: len === 0 ? 'rgb(219, 222, 223)' : 'red',
                }}
              >
                去结算
              </button>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="评论" key="vegetables">
            <JumboTabs>
              <JumboTabs.Tab title="全部" description="" key="fruits">
                {pj.map((item, index) => {
                  return (
                    <div key={index}>
                      <img src={item.img} alt="" />
                      {item.name}
                      <span style={{ fontSize: '2rem' }}>{item.a}</span>
                    </div>
                  );
                })}
              </JumboTabs.Tab>
              <JumboTabs.Tab title="满意" description="" key="vegetables">
                {pj.map((item, index) => {
                  return (
                    <div
                      key={index}
                      style={{ display: item.pj == '满意' ? '' : 'none' }}
                    >
                      <img src={item.img} alt="" />
                      {item.name}
                      <span style={{ fontSize: '2rem' }}>{item.a}</span>
                    </div>
                  );
                })}
              </JumboTabs.Tab>
              <JumboTabs.Tab title="不满意" description="" key="animals">
                {pj.map((item, index) => {
                  return (
                    <div
                      key={index}
                      style={{ display: item.pj == '不满意' ? '' : 'none' }}
                    >
                      <img src={item.img} alt="" />
                      {item.name}

                      <span style={{ fontSize: '2rem' }}>{item.a}</span>
                    </div>
                  );
                })}
              </JumboTabs.Tab>
            </JumboTabs>
          </Tabs.Tab>
          <Tabs.Tab title="商家" key="animals">
            商家
          </Tabs.Tab>
        </Tabs>
      </div>
      <Mask visible={visible} opacity={1} style={{ zIndex: '9999' }}>
        <div className="overlayContent">
          <div>粥品香坊</div>
          <Rate readOnly value={3.5} />
          <div>优惠信息</div>
          <p>在线支付满28间5，满50间10</p>
          <p>vc</p>
          <p>单人</p>
          <p>商家支持发票</p>
          <p>已加入外卖保计划</p>
          <div>商家公告</div>
          1235465465
          <div className="cha" onClick={() => setVisible(false)}>
            X
          </div>
        </div>
      </Mask>
    </div>
  );
}
